<template>
  <h3>ztree 组件示例</h3>
  <div class="flex">
    <f-ztree
      :data="listValue"
      :fieldNames="{ label: 'name', key: 'id', children: 'children' }"
      class="l-w300 w300 br bl" />
    <div>
      <f-button @click="clickRefresh">刷新</f-button>
      <f-ztree
        ref="ztreeQuery"
        :query="apiServe"
        :fieldNames="{ label: 'name', key: 'id' }"
        class="l-w300 w300 br" />
    </div>
    <f-ztree
      :data="dataValue"
      :fieldNames="{ label: 'name', key: 'id', children: 'children' }"
      class="l-w300 w300 br">
      <template #operate="{ node, data }">
        <div @click="test('新增', node, data)" title="新增">新增</div>
        <div @click="test('修改', node, data)">修改</div>
        <div @click="test('删除', node, data)">删除</div>
      </template>
    </f-ztree>
    <f-ztree
      :data="dataValue"
      showCheckbox
      :defaultExpandedKeys="[2, 21]"
      :defaultCurrentKey="3"
      :fieldNames="{ label: 'name', key: 'id', children: 'children' }"
      class="l-w300 w300 br">
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <div>{{ data.name }}</div>
        </div>
      </template>
      <template #operate="{ node, data }">
        <f-icon name="plus" @click="test('新增', node, data)" title="新增" />
        <f-icon name="edit" @click="test('修改', node, data)" />
        <f-icon name="delete" @click="test('删除', node, data)" />
      </template>
    </f-ztree>
  </div>
  <hr />
  <a class="mr10" @click="clickGetNode">获取树结构</a>
  <a class="mr10" @click="clickNode">获取选择</a>
  <a class="mr10" @click="clickShowCheckbox">checkbox</a>
  <a class="mr10" @click="clickRemoveCurrentRow">删除选中</a>
  <a class="mr10" @click="clickRemove">删除指定</a>
  <a class="mr10" @click="clickInsertCurrentChild">插入选择行子节点</a>
  <a class="mr10" @click="clickInsertChild">插入节点</a>
  <a class="mr10" @click="clickSelect">选中节点</a>
  <a class="mr10" @click="clickExpand">展开指定</a>
  <a class="mr10" @click="clickCheckboxNode">获取勾选</a>
  <a class="mr10" @click="clickSetCheckboxNode">设置勾选</a>
  <hr />
  <f-input v-model:value="treeSearch" class="l-w200" />
  <hr />
  <f-ztree
    ref="ztree"
    :data="dataValue"
    draggable
    :showCurrent="showCurrent"
    :searchValue="treeSearch"
    :showOperateWay="'hover'"
    :showCheckbox="showCheckbox"
    :defaultNotShowCheckboxKeys="[3, 311]"
    :defaultCheckedKeys="[312]"
    :defaultCurrentKey="2"
    :fieldNames="{ label: 'name', key: 'id', children: 'children' }"
    class="l-w300">
    <template #operate="{ node, data }">
      <f-button type="link" @click="test('张钊', node, data)">张钊</f-button>
      <f-button type="link" @click="test('张钊李四', node, data)">张钊李四</f-button>
      <f-icon name="plus" @click="test('新增', node, data)" />
      <f-icon name="edit" @click="test('修改', node, data)" />
      <f-icon name="delete" @click="test('删除', node, data)" />
    </template>
  </f-ztree>
  <hr />
  <f-tree-select
    class="s-w200"
    v-model:value="modelValue"
    :tree-data="dataValue"
    :treeNodeFilterProp="'name'"
    :fieldNames="{ children: 'children', label: 'name', value: 'id' }"
    @change="changeTree"
    @dropdownVisibleChange="dropdownVisibleChange"></f-tree-select>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from 'vue';

const ztree = ref();
const ztreeQuery = ref();
const showCurrent = (node) => node.isLeaf;
const loading = ref(false);
const treeSearch = ref();

const selectRef = ref();

const modelValue = ref(21);
onMounted(() => {
  console.log('on mounted');
});
const listValue = [
  { id: 1, name: '1-我是目录', disabled: true },
  { id: 2, name: '2-我是目录', disabled: false },
  { id: 3, name: '3-我是目录', disabled: false },
  { id: 4, name: '4-我是目录', disabled: false },
  { id: 5, name: '5-我是目录', disabled: true },
  { id: 6, name: '6-我是目录', disabled: false }
];

const dataValue = ref([]);

setTimeout(() => {
  const list = [
    { id: 1, name: '1-我是目录树', checked: true, showOperate: false },
    {
      id: 2,
      name: '2-我是目录树',
      children: [
        {
          id: 21,
          name: '21-2222-张钊-3333',
          children: [
            {
              id: 211,
              name: '211-2222-我是张钊-3333',
              disabled: true,
              checked: true,
              children: [
                {
                  id: 2111,
                  name: '2111-2222-我是张钊-3333-11',
                  children: [{ id: 21111, name: '21111-2222-我是张钊-3333-11-11' }]
                },
                {
                  id: 2112,
                  name: '2112-2222-我是张钊-3333-22',
                  children: [
                    { id: 21121, name: '21121-2222-我是张钊-3333-22-11' },
                    {
                      id: 21122,
                      name: '21122-2222-我是张钊-3333-22-22',
                      children: [
                        { id: 211221, name: '211221-2222-3333-444222-11' },
                        { id: 211222, name: '211222-2222-3333-444222-22' }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              id: 212,
              name: '212-2222-3333-444222',
              children: [
                { id: 2121, name: '2121-2222-3333-444222-11' },
                { id: 2122, name: '2122-2222-3333-444222-22' }
              ]
            },
            { id: 213, name: '213-3333-444222', disabled: true, children: [] },
            {
              id: 214,
              name: '214-3333-444222',
              disabled: true,
              children: [
                { id: 2141, name: '2141-3333-444222-11' },
                {
                  id: 2142,
                  name: '2142-3333-444222-22',
                  children: [
                    { id: 21421, name: '21421-2222-3333-444222-11', checked: true },
                    { id: 21422, name: '21422-2222-3333-444222-22' }
                  ]
                }
              ]
            },
            { id: 215, name: '215-3333-444222', disabled: true },
            { id: 216, name: '216-3333-444222' }
          ]
        },
        { id: 22, name: '22-2222-张钊-4444' }
      ]
    },
    {
      id: 3,
      name: '3-我是目录树',
      children: [
        {
          id: 31,
          name: '31-3333-我是张钊',
          children: [
            { id: 311, name: '311-我是张钊-3333-1111' },
            { id: 312, name: '312-3333-2222-我是张钊' }
          ]
        }
      ]
    },
    { id: 4, name: '4-我是目录树', disabled: true }
  ];
  dataValue.value = list;
}, 1000 * 2);

const showCheckbox = ref(true);

const apiServe = () =>
  new Promise((resolve, reject) => {
    fetch(`base/odcatalogs/queryList`, {
      method: 'post',
      body: JSON.stringify({}),
      headers: { 'Content-Type': 'application/json', Accesstoken: window['FokUIOptions'].token() }
    })
      .then((response) => response.json())
      .then((res) => resolve(res.data))
      .catch(() => reject());
  });

const clickRefresh = () => {
  const $ztree = ztreeQuery.value;
  if ($ztree) {
    $ztree.refreshQuery();
  }
};

const clickShowCheckbox = () => {
  showCheckbox.value = !showCheckbox.value;
};

const clickNode = () => {
  const key = ztree.value.getCurrentKey();
  const node = ztree.value.getCurrentNode();
  console.log(key, node);
};

const test = (title, node, data) => {
  console.log(title, node, data);
  if (title === '新增') {
    const key = Math.random() * 10000;
    ztree.value.insert({ id: key, name: key }, node);
  }
  if (title === '删除') {
    ztree.value.remove(node);
  }
};

const clickGetNode = () => {
  const res = ztree.value.getNode();
  console.log(res);
};

const clickRemoveCurrentRow = () => {
  const node = ztree.value.getCurrentNode();
  const res = ztree.value.remove(node);
  console.log(res);
};

const clickRemove = () => {
  const res = ztree.value.remove({ id: 211 });
  console.log(res);
};

const clickInsertCurrentChild = () => {
  const key = Math.random() * 10000;
  const node = ztree.value.getCurrentNode();
  const res = ztree.value.insert({ id: key, name: key }, node);
  console.log(res);
};

const clickInsertChild = () => {
  const key = Math.random() * 10000;
  const res = ztree.value.insert({ id: key, name: key });
  console.log(res);
};

const clickSelect = () => {
  ztree.value.current({ id: 2 });
};

const clickExpand = () => {
  ztree.value.expand({ id: 2 });
};

const clickCheckboxNode = () => {
  const keys = ztree.value.getCheckedKeys();
  const nodes = ztree.value.getCheckedNodes();
  console.log(keys, nodes);
};

const clickSetCheckboxNode = () => {
  ztree.value.setCheckedKeys([211, 212, 214, 213, 215, 216]);
};

const changeTree = (value) => {
  console.log('changeTree', value);
  console.log(selectRef);
};
const dropdownVisibleChange = (value) => console.log('dropdownVisibleChange', value);

defineExpose({
  testA: () => console.log('testA')
});

onBeforeMount(() => {});
</script>

<style lang="scss">
.custom-tree-node {
  display: flex;
}
</style>
